<template>
  <div class="count-down-wrapper">
    <div class="count-down" data-payleftseconds="599">
      <p class="time-left">
        请在
        <span ref="minute" class="minute">{{ mins }}</span>
        分钟
        <span ref="second" class="second">{{ seconds }}</span
        >秒内完成支付
      </p>
      <p class="tip">
        超时订单会自动取消，如遇支付问题，请致电开心影院客服：110
      </p>
    </div>
    <Expire :isEnd="isZero" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { unLockTicket } from '@/api/ticket'
import { mapState } from 'vuex'
import Expire from './Expire.vue'
export default {
  name: 'index',
  props: {
    time: {
      type: [String, Number],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      days: '0',
      hours: '00',
      mins: '30',
      seconds: '00',
      timer: null,
      curTime: 0
    }
  },
  components: {
    Expire
  },
  computed: {
    ...mapState('order', ['end']),
    duration () {
      if (this.end) {
        return dayjs(this.end).diff(Date.now(), 'second')
      }
      return this.isMilliSecond
        ? Math.round(+dayjs(this.end).diff(Date.now(), 'second') / 1000)
        : Math.round(+dayjs(this.end).diff(Date.now(), 'second'))
    },
    isEnd () {
      return this.duration <= 0
    },
    isZero () {
      // 判断this.mins 和 this.seconds 的类型
      return this.mins === 0 && this.seconds === 0
    }
  },
  watch: {
    duration () {
      this.countDown()
    },
    async isEnd (val) {
      if (val) {
        const data = await unLockTicket(
          this.selectedSeat,
          this.$route.query.pId
        )
        if (data.data === '解锁成功') {
          this.$bus.$emit('unLockTicket', true)
          this.$store.commit('ticket/SET_SELECTED_SEAT', [])
        }
      }
    }
  },
  mounted () {
    this.countDown()
    this.$bus.$on('expire', (expireTime) => {
      console.log(expireTime)
      this.end = expireTime
    })
  },
  methods: {
    countDown () {
      this.curTime = Date.now()
      this.getTime(this.duration)
    },
    getTime (duration) {
      this.timer && clearTimeout(this.timer)
      if (duration < 0) return

      const { dd, hh, mm, ss } = this.durationFormatter(duration)
      this.days = dd || 0
      this.hours = hh || 0
      this.mins = mm || 0
      this.seconds = ss || 0
      this.timer = setTimeout(() => {
        const now = Date.now()
        const diffTime = Math.floor((now - this.curTime) / 1000)
        this.curTime = now
        this.getTime(duration - diffTime)
      }, 1000)
    },
    durationFormatter (time) {
      if (!time) return { ss: 0 }
      let t = time

      const ss = t % 60
      t = (t - ss) / 60
      if (t < 1) return { ss }

      const mm = t % 60
      t = (t - mm) / 60
      if (t < 1) return { mm, ss }

      const hh = t % 24
      t = (t - hh) / 24
      if (t < 1) return { hh, mm, ss }

      const dd = t
      return { dd, hh, mm, ss }
    }
  }
}
</script>

<style lang="scss" scoped>
.count-down-wrapper {
  width: 100%;
  height: 90px;
  padding-top: 20px;
  margin-bottom: 40px;
  background-color: #fff3f3;
}
.count-down-wrapper .count-down {
  padding-left: 55px;
  min-height: 41px;
  margin-left: 30px;
  background: url()
    no-repeat;
  background-position: 0 17px;
}
.count-down-wrapper .time-left {
  font-size: 16px;
  color: #666;
  margin-bottom: 4px;
}
.count-down-wrapper .tip {
  font-size: 14px;
  color: #f03d37;
}

p {
  margin: 0;
}
.count-down-wrapper .time-left .minute,
.count-down-wrapper .time-left .second {
  font-size: 32px;
  color: #f03d37;
  margin: 0 5px;
}
</style>
